<!--聊天页面 , 用于与用户进行聊天-->
<template>
  <div>
    <div id="son1">
      <div class="app3">
        <!--            指定一个刷新会话列表的按钮-->
        <div>
          <button class="but0">
            <i class="el-icon-loading"/>
          </button>
          <!--           指定一个刷新的按钮 ,来进行刷新-->
          <button class="but1" title="刷新列表" @click="RefreshTheList">
            <i class="el-icon-refresh"/>
          </button>
        </div>

        <GeminiScrollbar autoshow class="my-scroll-bar">
          <el-menu>
            <span class="span1">聊天列表</span>
            <!--             遍历用户的会话列表 , 来展示会话-->
            <!--           展示会话列表-->
            <div v-for="item in conversationList" :key=item.conversationID>
              <Cli :conversation="item"></Cli>
            </div>
          </el-menu>
        </GeminiScrollbar>
      </div>
    </div>
    <div class="son2">
      <!--      展示当前的会话列表-->
      <currentConversation2></currentConversation2>
    </div>
  </div>
</template>

<script>
import Cli from "@/views/WeChat/Cli";
//引入与用户的聊天列表页面
import {mapState} from "vuex";
import currentConversation2 from "@/views/WeChat/chatCoze/currentConversation2";

export default {
  name: "index",
  components: {
    Cli,
    currentConversation2
  },
  data() {
    return {
      //当前处于操作中的用户的索引
      CatchIndex: null,
      isRefreshing: false, //是否正在刷新列表
    }
  },
  methods: {
    /*
    刷新会话的函数 , 用于刷新会话
     */
    RefreshTheList() {
      //判断 , 是否可以进行更新会话
      if (!this.isRefreshing) {
        console.log("点击刷新会话列表");
        this.isRefreshing = true;
        //  调用获取列表的函数 ,来刷新列表
        this.$store.dispatch("timMessage/getConversationList")
          .then(() => {
            this.isRefreshing = false
          }).catch(() => {

        })
      }
    }
  },
  mounted: function () {

    //  向服务端 , 进行请求,  当前用户的朋友列表 , 以及朋友的详细信息 , 以及聊天记录 , 等等
    this.$store
      .dispatch("user/getFriends")
      .then(() => {
        console.log("朋友列表 , 展示成功");
      })
      .catch((error) => {
        console.log("用户的朋友列表 , 展示失败 , 登录错误" + error);
      })
  },
  computed: {
    //引入用户的会话列表  ///所有的会话列表 ///用户当前操作的会话
    ...mapState({
      conversationList: (state) => state.timMessage.conversationList,
      currentConversation: (state) => state.timMessage.currentConversation,
    })
  },
}
</script>

<style scoped>

/*<!--指定第一个 子盒子的大小-->*/
#son1 {
  /*指定子盒子的高度 , 宽度*/
  width: calc(15%);
  float: left;
  min-height: calc(100vh - 50px);
  /*  指定左边框*/
  border-right: 1px solid #999999;
  box-shadow: 0 3px 5px rgba(250, 250, 250, 1.1);

}

.my-scroll-bar {
  min-height: calc(100vh - 50px);
  border-top: 1px solid #999999;
}

/*<!--子组件的大小-->*/
.son2 {
  /*设置背景图片*/
  background-image: url("wxin.jpg");
  /*图片只显示一张*/
  background-repeat: no-repeat;
  /*使图片居中显示*/
  background-position: center;
  float: left;
  /*width: calc(100% - 230px);*/
  width: calc(85%);

  min-height: calc(100vh - 50px);
}

.app3 {
  height: 100px;
  /*min-height: calc(100vh - 600px);*/
}

.span1 {
  font-size: 11px;
  padding-left: 5px;
}

button {
  display: inline-block;
  cursor: pointer;
  border: none;
  background: transparent;
  box-sizing: border-box;
  transition: 0.3s;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  margin: 0 10px 0 0;
  padding: 0;
  width: 40px;
  height: 38px;
  line-height: 34px;
  font-size: 25px;
  text-align: center;
  white-space: nowrap;
  border-radius: 50%;
  outline: 0;
}

.but1 {
  float: right;
}

.but1:hover {
  /*旋转 360度 */
  transform: rotate(360deg);
  color: #3a8ee6;
}

.but0 {
  float: left;
  margin-left: 20px;
  color: #1592c1;
}
</style>
